﻿<Window x:Class="Microsoft.Samples.Kinect.TicTacToe.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:tk="clr-namespace:Microsoft.Kinect.Toolkit;assembly=Microsoft.Kinect.Toolkit"
    xmlns:ttt="clr-namespace:Microsoft.Samples.Kinect.TicTacToe"
    Title="Tic Tac Toe" Height="640" Width="980" Loaded="WindowLoaded" Closing="WindowClosing">

    <Window.Resources>
        <SolidColorBrush x:Key="MediumGreyBrush" Color="#6e6e6e"/>
        <SolidColorBrush x:Key="DarkGreyBrush" Color="#505050"/>
        <SolidColorBrush x:Key="KinectPurpleBrush" Color="#52318F"/>
        <SolidColorBrush x:Key="KinectBlueBrush" Color="#00BCF2"/>

        <Style TargetType="{x:Type Image}">
            <Setter Property="SnapsToDevicePixels" Value="True"/>
        </Style>

        <Style TargetType="{x:Type Button}" x:Key="StartButton" >
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <StackPanel Orientation="Horizontal" Background="Transparent">
                                <TextBlock x:Name="StartButtonText" Text="{TemplateBinding Content}" TextAlignment="Left"  VerticalAlignment="Center" Foreground="{StaticResource KinectBlueBrush}" FontSize="36" FontWeight="Light"/>
                                <Grid Margin="9 0 0 0">
                                    <Image x:Name="StartButtonNormal" Source="Images\StartNormal.png" Stretch="None" HorizontalAlignment="Center"/>
                                    <Image x:Name="StartButtonHover" Source="Images\StartHover.png" Stretch="None" HorizontalAlignment="Center" Visibility="Collapsed"/>
                                </Grid>
                            </StackPanel>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Visibility" Value="Collapsed" TargetName="StartButtonNormal"/>
                                <Setter Property="Visibility" Value="Visible" TargetName="StartButtonHover"/>
                                <Setter Property="Foreground" Value="{StaticResource KinectPurpleBrush}" TargetName="StartButtonText"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="{x:Type Button}" x:Key="RematchButton" >
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <StackPanel Orientation="Horizontal" Background="Transparent">
                                <TextBlock x:Name="RematchButtonText" Text="{TemplateBinding Content}" TextAlignment="Right"  VerticalAlignment="Center" Foreground="{StaticResource KinectBlueBrush}" FontSize="36" FontWeight="Light"/>
                                <Grid Margin="9 0 0 0">
                                    <Image x:Name="RematchButtonNormal" Source="Images\RematchNormal.png" Stretch="None" HorizontalAlignment="Center"/>
                                    <Image x:Name="RematchButtonHover" Source="Images\RematchHover.png" Stretch="None" HorizontalAlignment="Center" Visibility="Collapsed"/>
                                </Grid>
                            </StackPanel>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Visibility" Value="Collapsed" TargetName="RematchButtonNormal"/>
                                <Setter Property="Visibility" Value="Visible" TargetName="RematchButtonHover"/>
                                <Setter Property="Foreground" Value="{StaticResource KinectPurpleBrush}" TargetName="RematchButtonText"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    
    <Grid Name="layoutGrid" Margin="10 0 10 10">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <DockPanel Grid.Row="0" Margin="0 0 0 20">
            <Image DockPanel.Dock="Left" Source="Images\Logo.png" Stretch="Fill" Height="32" Width="81" HorizontalAlignment="Left" Margin="0 10 0 5"/>
            <TextBlock DockPanel.Dock="Right" Grid.Column="2" HorizontalAlignment="Right" VerticalAlignment="Bottom" Foreground="{StaticResource MediumGreyBrush}" FontFamily="Segoe UI" FontSize="18" Visibility="Collapsed" Name="NoRulesText" Margin="10 0 0 0">(No Rules)</TextBlock>
            <TextBlock DockPanel.Dock="Right" Margin="0 0 -1 0"  Grid.Column="2" HorizontalAlignment="Right" VerticalAlignment="Bottom" Foreground="{StaticResource MediumGreyBrush}" FontFamily="Segoe UI" FontSize="18">Tic Tac Toe</TextBlock>
            <tk:KinectSensorChooserUI HorizontalAlignment="Center" Name="SensorChooserUI" IsListening="True" Margin="0 0 0 5"/>
        </DockPanel>
        <Grid Grid.Row="1" Visibility="Visible" Name="WelcomePanel" Margin="50">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="3*"/>
                <ColumnDefinition Width="2*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="3*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <StackPanel Grid.Column="0" Grid.RowSpan="2">
                <TextBlock Foreground="{StaticResource KinectPurpleBrush}" FontSize="48" FontFamily="Segoe UI" FontWeight="Light" Margin="0 0 0 10">
                Welcome
                </TextBlock>
                <TextBlock Foreground="{StaticResource MediumGreyBrush}" FontSize="18" FontFamily="Segoe UI" FontWeight="Regular">
                Audio Tic-Tac-Toe is a two-player game<LineBreak/>
                designed to highlight Kinect's audio directional<LineBreak/>
                detection capabilities. <ttt:BoardSquareViewer x:Name="WelcomeTextX" XBrush="{StaticResource KinectPurpleBrush}" Width="20" Height="20"/> will be assigned to the<LineBreak/>
                first player recognized and <ttt:BoardSquareViewer x:Name="WelcomeTextO" OBrush="{StaticResource DarkGreyBrush}" Width="20" Height="20"/> will be assigned<LineBreak/>
                to the second player.<LineBreak/>
                <LineBreak/>
                When it's your turn, say a number to claim the<LineBreak/>
                spot on the board.<LineBreak/>
                <LineBreak/>
                Press the start button or say "Start" to play.
                </TextBlock>
            </StackPanel>
            <ttt:BoardViewer Grid.Column="1" Grid.Row="0" Stretch="Uniform" XBrush="{StaticResource MediumGreyBrush}" OBrush="{StaticResource MediumGreyBrush}" IdBrush="{StaticResource KinectBlueBrush}" IdFontSize="24" HighlightBrush="White" x:Name="WelcomeBoard"/>
            <Button Grid.Column="1" Grid.Row="1" Style="{StaticResource StartButton}" Content="Start" Height="Auto" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="10" Name="WelcomeStartButton" Click="WelcomeStartButtonClicked"/>
        </Grid>
        <Grid Grid.Row="1" Name="GamePanel" Visibility="Collapsed">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="3*"/>
                <ColumnDefinition Width="50"/>
                <ColumnDefinition Width="2*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <ttt:BoardViewer Grid.Column="0" Grid.RowSpan="2" x:Name="GameBoard" Stretch="Uniform" XBrush="{StaticResource KinectPurpleBrush}" OBrush="{StaticResource DarkGreyBrush}" IdBrush="{StaticResource KinectBlueBrush}" IdFontSize="48" HighlightBrush="White"/>
            <Viewbox Grid.Column="2" Grid.Row="0" Stretch="Uniform" VerticalAlignment="Top">
                <Grid>
                    <Image Name="Image" Width="640" Height="480"/>
                    <ttt:PlayerViewer x:Name="XViewer" Width="640" Height="480" SymbolBrush="{StaticResource KinectPurpleBrush}"/>
                    <ttt:PlayerViewer x:Name="OViewer" Width="640" Height="480" SymbolBrush="{StaticResource DarkGreyBrush}"/>
                </Grid>
            </Viewbox>
            <TextBlock Grid.Column="2" Grid.Row="1" Name="StatusText" Foreground="{StaticResource MediumGreyBrush}" TextAlignment="Left" FontFamily="Segoe UI" FontSize="20" Margin="0 10 0 0" TextWrapping="Wrap"/>
            <Button Grid.Column="2" Grid.Row="1" Style="{StaticResource RematchButton}" Content="Rematch" Height="Auto" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="10" Visibility="Collapsed" Name="RematchButton" Click="RematchButtonClicked"/>
        </Grid>
    </Grid>
</Window>
